<template>
  <div class="user-card-container">
    <template v-for="(item, index) in arr" :key="item.link">
      <i
        :class="['iconfont', item.icon]"
        @click.self="JumpPage(index, item.link)"
      >
        <img v-if="index < 2" v-lazy="item.link" alt="" />
        <a :href="item.link" target="_blank" v-else></a>
      </i>
    </template>
  </div>
</template>

<script setup lang="ts">
import { arr } from "./config";
const JumpPage = (index: number, link: string) => {
  if (index > 1) {
    return window.open(link);
  } else {
    return window.open(link);
  }
};
</script>

<style scoped lang="less">
.user-card-container {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  text-align: center;
  i {
    position: relative;
  }
  .iconfont {
    font-size: 30px;
    margin: 0 2px;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    img {
      box-sizing: border-box;
      visibility: hidden;
      position: absolute;
      left: 50%;
      top: -130px;
      width: 120px;
      transform: translate(-50%, 0);
      height: 120px;
      padding: 10px;
      border-radius: 10px;
      background: #fff;
      opacity: 0;
      transition: all 0.3s linear;
    }
    &:hover {
      background: #1989fa;
      img {
        opacity: 1;
        visibility: visible;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>
